<script lang="ts" setup>
import { useToPage } from '@/common/use/common';
import { reactive, ref } from 'vue';
import couponCard from './component/coupon-card/coupon-card.vue'
// typescript
const { navigateTo } = useToPage();
const grids = ref([
  {title: "待付款", count: 1, icon: "&#xe63f;"},
  {title: "待收货", count: 1, icon: "&#xe601;"},
  {title: "待评价", count: 1, icon: "&#xe608;"},
  {title: "退货/售后", count: 0, icon: "&#xe602;"},
  {title: "全部订单", count: 0, icon: "&#xe600;"}
]);
const iconProp = {color: "#FF6A00", size: 22};
const itemIcons = reactive({
  address: {...iconProp, type: "location"},
  collection: {...iconProp, type: "heart"},
  feedback: {...iconProp, type: "compose"}
} as any);
</script>

<!-- 我的 -->
<template>
  <view class="container">
    <view class="statusbar theme-background"></view>
    <!-- 头部 -->
    <view class="header theme-background">
      <view class="userinfo" @click="navigateTo('/pages/user-detail/user-detail')">
        <view class="avatar">
          <image src="../../static/images/default/avatar.png"></image>
        </view>
        <view class="user">
          <text>张三丰</text>
          <text>1898****439</text>
        </view>
      </view>
      <view class="iconx-box">
        <view hover-class="hover-class-opacity">
          <uni-badge text="99" :max-num="99" is-dot :offset="[8, 5]" absolute="rightTop"
            :custom-style="{ backgroundColor: '#FF2121' }">
            <uni-icons type="chatbubble" size="30" color="#fff"></uni-icons>
          </uni-badge>
        </view>
        <view hover-class="hover-class-opacity" @click="navigateTo('/pages/setting/setting')">
          <uni-icons type="gear" size="30" color="#fff"></uni-icons>
        </view>
      </view>
    </view>
    <!-- 我的订单模块 -->
    <view class="order-view">
      <text class="order-title">我的订单</text>
      <view class="grid-view">
        <uni-grid :column="5" :show-border="false">
          <template v-for="(item, index) in grids" :key="index">
            <uni-grid-item>
              <view class="grid-item" @click="navigateTo('/pages/order-list/order-list')">
                <view class="icon">
                  <view class="iconfont" v-html="item.icon"></view>
                </view>
                <text class="text">{{ item.title }}</text>
                <view class="grid-dot" v-if="item.count">
                  <uni-badge :text="item.count.toString()" :custom-style="{ backgroundColor: '#FF2121' }" />
                </view>
              </view>
            </uni-grid-item>
          </template>
        </uni-grid>
      </view>
    </view>
    <!-- 优惠券、签到卡片 -->
    <view class="card-view">
      <!-- 优惠券 -->
      <view>
        <coupon-card title="优惠券" desc="5张可用" />
      </view>
      <!-- 签到 -->
      <view>
        <coupon-card title="签到领福利" desc="今日未签到" />
      </view>
    </view>
    <!-- 抽奖卡片 -->
    <view class="luck-draw-view">
      <w-raffle-card></w-raffle-card>
    </view>
    <!-- 列表选项 -->
    <view class="list-view">
      <uni-list>
        <uni-list-item to="/pages/address/address" :extra-icon="itemIcons.address" clickable :show-extra-icon="true" showArrow title="收货地址" />
        <uni-list-item to="/pages/collection/collection" :extra-icon="itemIcons.collection" clickable :show-extra-icon="true" showArrow title="我的收藏" />
        <uni-list-item :extra-icon="itemIcons.feedback" :show-extra-icon="true" showArrow>
          <template #body>
            <button class="feedback-btn" size="mini" open-type="feedback">意见反馈</button>
          </template>
        </uni-list-item>
      </uni-list>
    </view>
  </view>
</template>

<style scoped lang="scss">
// scss
@mixin padding {
  padding: 30rpx;
}

.container {
  min-height: 100%;
  background-color: $border-color;
}

.header {
  height: 200rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30rpx;

  .userinfo {
    display: flex;
    align-items: center;

    .avatar {
      width: 96rpx;
      height: 96rpx;
      margin-right: 20rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .user {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;

      text {
        color: #fff;

        &:first-child {
          font-size: 32rpx;
          margin-bottom: 10rpx;
        }

        &:last-child {
          font-size: 24rpx;
        }
      }
    }
  }

  .iconx-box {
    display: flex;

    >view {
      margin-left: 30rpx;
    }
  }
}

.order-view {
  background-color: #fff;
  margin-top: 20rpx;
  @include padding();

  .order-title {
    display: block;
    margin-bottom: 30rpx;
  }

  .grid-view {
    .grid-item {
      position: relative;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .icon {
      width: 64rpx;
      height: 64rpx;
      background: linear-gradient(-45deg, #ff6a00 1%, #fbc39a 100%);
      box-shadow: 0px 5px 5px #ff6a0066;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;

      view {
        font-size: 44rpx;
        color: #fff;
      }
    }

    .text {
      font-size: 24rpx;
      color: $text-color;
      margin-top: 10rpx;
    }

    .grid-dot {
      position: absolute;
      right: 14rpx;
      top: -4rpx;
    }
  }
}

.card-view {
  margin: 20rpx auto;
  width: calc(100% - 40rpx);
  display: flex;

  > view {
    flex: 1;

    &:first-child {
      margin-right: 20rpx;
    }
  }
}

.luck-draw-view {
  margin: 20rpx auto;
  width: calc(100% - 40rpx);
}

.feedback-btn {
  padding: 0;
  margin: 0;
  line-height: initial;
  width: 100%;
  height: 100%;
  background-color: transparent;
  text-align: left;
  font-size: 28rpx;

  &::after {
    display: none;
  }
}
</style>
